<template>
	<view>
		<view class="box">
			<image :src="images" class="img" ></image>
			<view class="flex-y-center infobox">
				<image :src="avatar" class="tximg flex-grow-0"></image>
				<view class="flex-grow-1">
					<view class="name">{{username}}</view>
					<view class="id">{{useraddress}}代理</view>
				</view>
			</view>
			<image :src="codeimg" class="codeimg"></image>
			<view class="flex-aro bottombtn">
				<button class="btn1" @tap="createNewImg">保存图片</button>
				<button class="btn2" open-type="share">分享好友</button>
			</view>
		</view>
		<view class="canvas-box">
			<canvas style="width: 650px; height: 1088px; position: fixed; top: 9999px" canvas-id="mycanvas" />
		</view>
	</view>
</template>

<script>
	import {
		Agent
	} from '../../../apirequest/agent-model.js';
	var a = new Agent();
	export default {
		data() {
			return {
				imagePath: '',
				images: '',
				codeimg: '',
				avatar: '',
				username: '',
				useraddress: ''
			}
		},
		onLoad() {
			this._index();
			var userinfo = wx.getStorageSync('userinfo')
			this.avatar = userinfo.avatar
			this.username = userinfo.username
		},
		methods: {
			_index() {
				var that = this;
				a.qrcode((res) => {
					if (res.code == 1) {
						that.images = res.data.bg_image
						that.codeimg = res.data.qrcode
						that.useraddress = res.data.area
					}
				})
			},

			createNewImg: function() {
				var that = this;
				var context = uni.createCanvasContext('mycanvas');
				uni.getImageInfo({
					src: that.images,
					success: function(res) {
						context.save(); // 保存当前context的状态
						let Path = res.path; // 背景图片
						context.drawImage(Path, 0, 0, 650, 1088);
						context.setFillStyle('#ffffff'); // context.fillRect(0, 500, 375, 100)

						uni.showToast({
							title: '正在保存中...',
							icon: 'loading',
							duration: 2000
						});

						context.stroke();
						// 如果是网络图片需要加上
						uni.getImageInfo({
							src: that.codeimg,
							success: function(res) {
								context.save(); // 保存当前context的状态
								let Path = res.path; // 背景图片
								context.drawImage(Path, 170, 480, 300, 300);
								context.stroke();
								context.setFontSize(25);
								context.setFillStyle('#000');
								context.setTextAlign('left');
								context.fillText(that.username, 150, 295);
								context.stroke();
								context.setFontSize(18);
								context.setFillStyle('#999');
								context.setTextAlign('left');
								context.fillText( that.useraddress+'代理', 150, 325);
								context.stroke();
								uni.getImageInfo({
									src: that.avatar,
									success: function(res) {
										context.save(); // 保存当前context的状态
										let Path = res.path; // 绘制二维码
										// 图片的x坐标
										let bg_x = 50
										// 图片的y坐标
										let bg_y = 250
										// 图片宽度
										let bg_w = 90
										// 图片高度
										let bg_h = 90
										// 图片圆角
										let bg_r = 43
										context.beginPath()
										context.arc(bg_x + bg_r, bg_y + bg_r, bg_r,
											Math.PI, Math.PI *
											1.5)
										context.arc(bg_x + bg_w - bg_r, bg_y +
											bg_r, bg_r, Math.PI *
											1.5, Math.PI * 2)
										context.arc(bg_x + bg_w - bg_r, bg_y +
											bg_h - bg_r, bg_r, 0,
											Math.PI * 0.5)
										context.arc(bg_x + bg_r, bg_y + bg_h -
											bg_r, bg_r, Math.PI *
											0.5, Math.PI)
										context.clip()
										context.drawImage(Path, bg_x, bg_y, bg_w,
											bg_h)


										context.draw(true, setTimeout(function() {
											//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
											uni.canvasToTempFilePath({
												x: 0,
												y: 0,
												width: 650,
												height: 1088,
												destWidth: 650,
												destHeight: 1088,
												canvasId: 'mycanvas',
												success: function(
													res) {
													var tempFilePath =
														res
														.tempFilePath;
													that.imagePath =
														tempFilePath
													that
												.saveImg();
													uni
												.hideToast();
												},
												fail: function(
													res) {
													uni
												.hideToast();
													that
												.createNewImg();
													console
														.log(
															res
															);
												}
											});
										}, 200));
									}
								});
							}
						});
					}
				});
			},

			saveImg(e) {
				var that = this;
				let url = that.imagePath;
				that.saveImg1(url);
			},

			saveImg1(url) {
				uni.getImageInfo({
					src: url,
					success: (res) => {
						let path = res.path;
						console.log(path); // return false

						uni.saveImageToPhotosAlbum({
							filePath: path,
							success: (res) => {
								console.log(res);
							},
							fail: (res) => {
								if (res.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || res
									.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
									uni.showModal({
										title: '提示',
										content: '需要您授权保存相册',
										showCancel: false,
										success: (modalSuccess) => {
											uni.openSetting({
												success(settingdata) {
													console.log('settingdata',
														settingdata);

													if (settingdata
														.authSetting[
															'scope.writePhotosAlbum'
														]) {
														uni.showModal({
															title: '提示',
															content: '获取权限成功,再次点击图片即可保存',
															showCancel: false
														});
													} else {
														uni.showModal({
															title: '提示',
															content: '获取权限失败，将无法保存到相册哦~',
															showCancel: false
														});
													}
												},

												fail(failData) {
													console.log('failData',
														failData);
												},

												complete(finishData) {
													console.log('finishData',
														finishData);
												}
											});
										}
									});
								}
							}
						});
					},
					fail: (res) => {}
				});
			},
		}
	};
</script>
<style lang="scss">
	page {
		background: #f3f3f3;
		font-size: 0.75rem;
	}

	.box {
		text-align: center;
	}

	.box .img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.box .codeimg {
	width: 310rpx;
	height: 310rpx;
	margin-top: 68%;
	}



	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		padding: 18rpx 0;
	}

	.bottom .item {
		width: 50%;
		font-size: 0.85rem;
		font-weight: 700;
		background: #fff;
		color: #444;
		padding: 0;
	}

	button::after {
		border: none;
	}

	.bottom .item:nth-child(1) {
		border-right: 4rpx solid #e8e8e8;
	}

	.bottom .item .icon {
		width: 34px;
		height: 34px;
		margin-right: 10rpx;
	}

	.bottombtn {
		top: 69%;
		/* margin: 20rpx 50rpx; */
		position: absolute;
		width: 100%;

		button {
			font-size: 0.95rem;
			width: 240rpx;
			background: #fff;
		}

		.btn1 {
			color: #2A87FB;
			border: 1px solid #2A87FB;
		}

		.btn2 {
			background: #2A87FB;
			color: #fff;
		}
	}

	.infobox {
		position: absolute;
		top: 22%;
		left: 68rpx;

		.tximg {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.name {
			font-size: 1.2rem;
			margin-bottom: 10rpx;
			text-align: left;
		}

		.id {
			color: #999;
				text-align: left;
		}
	}
</style>
